<template>
	<view class="main-page">
		<u-navbar :placeholder="true" :title="title" :autoBack="true" rightText="筛选" rightIcon="search" @rightClick="toShowSearch"></u-navbar>
		<view class="search">
			<u--input
				v-model="listQuery.key"
				class="input"
			    placeholder="请输入订单号/客户名称搜索"
				placeholderStyle="fontSize:'13px'"
			    border="none"
				shape="circle"
				suffixIcon="search"
				suffixIconStyle="color: #909399"
				fontSize="26rpx"
				:customStyle="{padding:'0 30rpx' }"
				@confirm="search"
			    clearable
			  ></u--input>
			<!-- <u-icon name="list-dot" color="#777" size="32"></u-icon> -->
		</view>
		<scroll-view class="container" @scrolltolower="getLists" :scroll-y="true">
			<view class="order-container">
				<view class="order-item" v-for="item,index in lists" :key="index">
					<view class="order-sn">
						<text class="sn">{{item.no}}</text>
						<u--text class="state" size="26rpx" :type="colors[item.state]" :text="'待'+item.step_label" v-if="item.step < 999 && item.step > 0"></u--text>
						<u--text class="state" size="26rpx" :type="colors[item.state]" :text="Enums.OrderState[item.state]" v-else></u--text>
					</view>
					<view class="content">
						<view class="content-item">
							<text class="label">订单类型：</text>
							<text class="value">{{Enums.OrderType[item.type]}}</text>
						</view>
						<view class="content-item">
							<text class="label">客户：</text>
							<text class="value">{{item.user ? item.user.nickname : ""}}</text>
						</view>
						<view class="content-item">
							<text class="label">款号：</text>
							<text class="value">{{item.product_no}}</text>
						</view>
						<view class="content-item">
							<text class="label">数量：</text>
							<text class="value">{{item.num}}</text>
						</view>
						<view class="content-item">
							<text class="label">类型：</text>
							<text class="value">{{item.productCategory ? item.productCategory.title : ''}}</text>
						</view>
						<!-- <view class="content-item">
							<text class="label">总额：</text>
							<text class="value">{{item.amount}}</text>
						</view> -->
					</view>
					<view class="btns-item">
						<view class=""></view>
						<view class="btns">
							<template v-if="item.step < 999 && (item.state == 1 || item.state == 2)">
								<u-button shape="circle" size="small" type="success" @tap="doAction(index)" :text="'提交'+item.step_label+'记录'"></u-button>
								<u-button shape="circle" size="small" type="primary" @tap="doAction(index, 1)" :text="'完成'+item.step_label"></u-button>
							</template>
							<u-button shape="circle" size="small" type="success" text="详情" @tap="detail(index)"></u-button>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</scroll-view>
		<orderHandler ref="orderHandler" :datas="handlerOrder" @onclose="onClose"></orderHandler>
		<u-popup
			:show="showSearch"
			@close="searchClose"
			mode="top"
			:overlayStyle="{zIndex: '9'}"
			zIndex="10">
			<view class="filter-content">
				<view class="search">
					<u--input
						v-model="listQuery.key"
						class="input"
					    placeholder="请输入订单号/客户名称搜索"
						placeholderStyle="fontSize:'13px'"
					    border="none"
						shape="circle"
						suffixIcon="search"
						suffixIconStyle="color: #909399"
						fontSize="26rpx"
						:customStyle="{padding:'0 30rpx' }"
					    clearable
					  ></u--input>
					<!-- <u-icon name="list-dot" color="#777" size="32"></u-icon> -->
				</view>
				<view class="filter-item">
					<view class="label">类型</view>
					<view class="value-item">
						<u-tag
							:text="item.title"
							:type="listQuery.cate_id == item.id ? 'warning' : 'info'"
							plain :plainFill="listQuery.cate_id == item.id"
							@tap="listQuery.cate_id = item.id"
							shape="circle" v-for="item,index in categorys"></u-tag>
					</view>
				</view>
				<view class="filter-item">
					<view class="label">日期</view>
					<view class="value-item">
						<view class="input" @tap="showCalendar = true">
							<view class="text">
								<text v-if="listQuery.date">{{listQuery.date}}</text>
								<text v-else class="placeholder">请选择下单日期</text>
							</view>
							<u-icon name="calendar" size="38rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="filter-item btn-item">
					<u-button type="primary" shape="circle" @tap="search">搜索</u-button>
					<u-button shape="circle" @tap="clear">清空</u-button>
				</view>
			</view>
		</u-popup>
		<u-calendar :show="showCalendar" :allowSameDay="true" mode="range" @confirm="confirmCalendar" @close="closeCalendar"></u-calendar>
	</view>
</template>

<script>
	import { getOrderLists, productCategory } from '@/common/api.js'
	import orderHandler from '@/components/orderHandler.vue'
	
	export default {
		components: {
			orderHandler
		},
		data() {
			return {
				status: 'loadmore',
				current: 0,
				listQuery: {
					limit: 8,
					page: 1,
					date: '',
					key: '',
					cate_id: '',
					type: 1, // 待生产
				},
				lists: [],
				colors: [ 'primary', 'warning', 'success', 'error', 'info'],
				handlerOrder: {},
				showSearch: false,
				categorys: [],
				showCalendar: false
			}
		},
		onLoad(params) {
			this.listQuery.type = params.type ? params.type : 1;
			this.title = params.type == 1 ? "待生产订单" : "历史订单";
			this.current = params.tab ? params.tab : 0;
		},
		onShow() {
			this.listQuery.page = 1;
			this.lists = [];
			this.status = 'loadmore';
			this.getLists();
			this.getCategory()
		},
		methods: {
			search(){
				this.listQuery.page = 1;
				this.lists = [];
				this.status = 'loadmore';
				this.getLists();
				this.showSearch = false
			},
			clear(){
				this.listQuery.date = ''
				this.listQuery.key = ''
				this.listQuery.cate_id = ''
			},
			tabChange(e) {
				this.current = e.index;
				this.listQuery.status = e.index;
				this.listQuery.page = 1;
				this.lists = [];
				this.status = 'loadmore';
				this.getLists();
			},
			getLists() {
				if (this.status == 'loading') return false;
				if (this.status == 'nomore') return false;
				this.status = 'loading';
				getOrderLists(this.listQuery).then((res) => {
					let {
						current_page,
						per_page,
						last_page,
						data
					} = res;
					if (current_page == last_page || last_page === 0) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
						this.listQuery.page++;
					}
					data.forEach((item) => {
						this.lists.push(item);
					});
				});
			},
			detail(index) {
				const item = this.lists[index];
				uni.navigateTo({
					url: '/pages/user/orderDetail?order_no=' + item.no,
				});
			},
			doAction(index, isCommplete = 0){
				const item = this.lists[index];
				this.handlerOrder = this.lists[index];
				this.handlerOrder.isCommplete = isCommplete
				this.$refs['orderHandler'].open()
			},
			onClose(){
				this.listQuery.page = 1;
				this.lists = [];
				this.status = 'loadmore';
				this.getLists();
			},
			toShowSearch(){
				this.showSearch = !this.showSearch
			},
			searchClose(){
				this.showSearch = false
			},
			getCategory(){
				productCategory().then(res => {
					res.forEach(item => {
						item.icon = this.$store.state.$siteConfig.cdnUrl + item.icon
					})
					this.categorys = res
				})
			},
			confirmCalendar(e){
				this.listQuery.date = `${e[0]} - ${e[e.length-1]}`
				this.showCalendar = false
			},
			closeCalendar(){
				this.showCalendar = false
			},
		}
	}
</script>

<style lang="scss">
	.u-tabs {
		.u-tabs__wrapper__nav {  }
	}
	.container {
		height: calc(100vh - 170rpx); padding-bottom: 20rpx;
	}
	.tabs { background-color: #ffffff; }
	.order-container {
		padding: 20rpx;
		font-size: 28rpx;
		.order-item {
			background-color: #ffffff; border-radius: 20rpx; padding:0 25rpx;
			.order-sn {
				display: flex; justify-content: space-between; padding: 20rpx 0; border-bottom:1px solid #e2e2e2 ;
				.sn {  }
				.state { width: auto; flex: none;  }
			}
			.content { 
				padding: 10rpx; 
				.content-item {
					display: flex; 
					.label { color: #90939c;padding-right: 10rpx;}
					.value { color: #444959; }
				}
			}
			.btns-item { 
				padding: 10rpx 0 20rpx; justify-content: space-between; display: flex;
				.btns {
					display: flex; justify-content: flex-end;
					.u-button {  width: auto; }
					.u-button + .u-button { margin-left: 20rpx; }
				}
			}
		}
		.order-item + .order-item { 
			margin-top: 30rpx;
		}
	}
	
	.search {
		padding: 20rpx 20rpx 0 20rpx; border-top: 1px solid #eee; 
		display: flex;
		.input { background-color: #ffffff; border-radius: 100rpx; height: 35px; line-height: 35px; padding: 0 30rpx; font-size: 26rpx; flex: 1;}
		.u-icon { font-weight: bold; font-size: 32px; }
	}
	
	.filter-content { padding-top: 120rpx; 
		.search {
			border-top: none; 
			.input { background-color: #f7f8fb; border-radius: 100rpx; height: 35px; line-height: 35px; padding: 0 30rpx; font-size: 26rpx; flex: 1;}
		}
		.filter-item {
			 padding: 10rpx 20rpx; 
			 .label { font-weight: 700; font-size: 26rpx; padding: 10rpx;}
			 .value-item {
				 display: flex; justify-content: flex-start;
				 /deep/ .u-tag-wrapper {
					 margin-right: 20rpx;
					flex-direction: row;
				 }
			 }
			 .input { background-color: #f7f8fb; border-radius: 100rpx; height: 35px; line-height: 35px; flex: 1; display: flex;padding: 0 30rpx;  justify-content: space-between;
				.placeholder {color: grey; font-size: 26rpx;}
			 }
		}
		.btn-item { padding: 20rpx; 
			.u-button { margin-top: 20rpx; }
		}
	}
</style>
